<template>
    <div id="add">
        <div class="add_this">
            <h3>发布人：{{FaBuRen.ZuoZhe}}</h3>
        </div>
        <div class="add_one">
            <label for="title">
                <span>标题：</span>
                <el-input placeholder="Title" id="title" class="title" v-model="FaBuRen.Title"/>
            </label>
        </div>
        <div class="add_two"> 
            <span>内容：</span>
            <el-input
                rows="4"
                type="textarea"
                placeholder="最多5000个字"
                class="textarea"
                v-model="FaBuRen.Context"
                maxlength="5000"
            />
        </div>
        <div class="add_there">
            <el-upload
                action=" "
                list-type="picture-card"
                :on-preview="handlePreview"
            >
                <el-icon class="el-icon--upload"><upload-filled class="aa"/></el-icon>
            </el-upload>
            <!-- 图片预览效果 -->
            <el-dialog 
                title="图片预览"
                v-model="newImg.previewVisible"
                width="60%"
            >
                <img :src="newImg.previewPath" class="Img"/>
            </el-dialog>
        </div>


        <div class="add_five">
            <el-button @click="Add">发表文章</el-button>
        </div>
    </div>
</template>
<script>
import { computed, reactive, ref } from 'vue'
import {useRouter} from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import { UploadFilled } from '@element-plus/icons-vue'
import {ElLoading,ElMessage} from 'element-plus'
import {Useradd} from '@/api/List.js'
import {ElLoad} from '@/Element-api/ElLoading.js'
export default {
    components:{
        Plus,
        UploadFilled
    },
    setup(){
        const router = useRouter()
        

        // 开始
        const newImg = reactive({
            //控制图片预览窗口的显示与隐藏
	        previewVisible:false,
	        //图片地址
	        previewPath:'',
            newUrl:''
        })
        


        // 获取 token的当前的登录人
        const FaBuRen = reactive({
            ZuoZhe: window.localStorage.getItem('token'),  // 作者 获取 token 的值
            Title: '',  // 标题
            Context:'', // 内容
            Img: '',    // 图片
            timer:''    // 时间
        })
        // 触发图片预览
        const handlePreview = (file)=>{
            newImg.previewVisible = true;
            // newImg.previewPath = 'https://cdn.pixabay.com/photo/2017/07/06/14/44/help-2478193_960_720.jpg'
            newImg.previewPath = file.url
            newImg.newUrl = file.name
        }
        // 格式时间
        const Timer = computed(()=>{
            var d = new Date();
            var year = d.getFullYear(); //年
            var month = d.getMonth()+1; //月
            var day = d.getDate();  //日
            var hour = d.getHours(); //小时
            var minute = d.getMinutes(); //分钟
            var timer = year+'/'+month+'/'+day+' '+hour+':'+minute
            return timer
        })
        // 把当前时间的值进行赋值
        FaBuRen.timer = Timer.value
        
        
        // 点击按钮 
        const Add = ()=>{
            if(FaBuRen.Title === '' || FaBuRen.Context === ''){
                ElMessage({
                    message:'标题或内容或图片不能为空',
                    type:'error',
                    duration:1000
                })
            }else{
                // 添加文章
                Useradd({
                    zuo:FaBuRen.ZuoZhe,
                    title:FaBuRen.Title,
                    time:FaBuRen.timer,
                    context:FaBuRen.Context,
                    // 添加默认的img
                    src:FaBuRen.Img === ''?'https://cdn.pixabay.com/photo/2015/01/15/16/17/hands-600497_960_720.jpg':FaBuRen.Img
                }).then((res)=>{
                    // console.log(res.data.message);
                    // console.log(res);
                }).catch((err)=>{
                    // console.log(err);
                })
                console.log(FaBuRen.Context);
                const load = ElLoad('发表成功，正在跳转.....')

                setTimeout(()=>{
                    load.close()
                    router.push('/look')
                },1000)
            }
        }


        return{
            Add,
            // 发布人的信息
            FaBuRen,
            newImg,

            handlePreview
        }
    }
}
</script>
<style lang="less" scoped>
    #add{
        width: 80%;
        height: auto;
        margin: 10px auto;
        .add_this{
            width: 50%;
            margin-left: 50px;
            text-align: center;
        }
        .add_one{
            width: 50%;
            margin-left: 50px;
            margin-top: 30px;
            .title{
                margin-top: 20px;
            }
        }
        .add_two{
            width: 50%;
            margin-left: 50px;
            margin-top: 30px;
            .textarea{
                margin-top: 20px;
            }
        }
        .add_there{
            width: 50%;
            margin-left: 50px;
            margin-top: 30px;
            .aa{
                width: 100px;
                height: 100px;
                color: skyblue;
            }
            .Img{
                width: 60%;
                height: 300px;
            }
        }
        .add_five{
            width: 50%;
            margin: 20px auto;
        }
    }
</style>
